<template>
  <div class="py-1 border-b-[1px] md:px-8">
    <div class="flex w-full h-16 relative items-center">
      <a
        :href="`/user/${userInfo.userId}`"
        target="_blank"
        rel="noopener noreferrer"
      >
        <el-avatar
          class="relative"
          :size="60"
          :src="
            userInfo.avatar ? userInfo.avatar : 'src/assets/img/default.png'
          "
          @error.once="setDefaultImage"
        />
      </a>
      <span class="absolute top-2 left-16">{{ userInfo.nickname }}</span>
      <span class="absolute left-16 bottom-3 svg-text">{{
        userInfo.signature
      }}</span>
      <div
        @click="toConcern"
        :class="flag ? 'click-style' : 'nature-style'"
        class="cursor-pointer overflow-hidden absolute right-4 rounded-lg w-20 flex justify-center py-2 text-[14px]"
      >
        {{ flag ? "关注" : "已关注" }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { toConcernAPI } from "@/http/api/concern";
import { USER_DEFAULT_AVATAR } from "@/define/cizzy";


let flag = ref(false);

let userInfo = reactive({
  userId: 11231,
  avatar: USER_DEFAULT_AVATAR,
  nickname: "月下闲人罢了",
  signature: "个性签名",
});

function setDefaultImage(e) {
  e.target.src = USER_DEFAULT_AVATAR;
  e.srcElement.onerror = null;
}

const toConcern = function () {
  toConcernAPI(userInfo.uerId).then((res) => {
    console.log(res);
    if (res.code == 200) {
      flag.value = !flag.value;
    } else {
      ElMessage({
        message: `${res.message}`,
        type: "warning",
      });
    }
  });
};
</script>

<style lang="scss" scoped>
.nature-style {
  border: 1px solid var(--logo-color);
  color: #000;
  background: #9b59b660;
  background: var();
}
.click-style {
  border: 1px solid var(--logo-color);
  color: #9b59b6;
  background: #cccccc60;
  background: var();
}
</style>